<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>杨鹏&李川莲 的婚礼邀请函</title>
    <link rel="stylesheet" href="./public1/css/zepto.fullpage.css">
    <link rel="stylesheet" href="./public1/css/animate.css">
    <link rel="stylesheet" href="./public1/css/index.css?3">
    <link rel="icon" href="./public1//wmjhl/h.png" />
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        #loading-mask {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background-color: #e2ecf5;
            z-index: 99;
        }
        
        .loading-box {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -150px;
            margin-top: -150px;
            display: block;
            width: 300px;
            height: 300px;
            border-radius: 3px;
            font-size: 30px;
            color: rgba(64, 158, 255, .5);
            vertical-align: top;
            text-align: center;
        }
        
        .loading-box p {
            font-size: 16px;
            margin: 16px 0;
        }
        
        .loading:before,
        .loading:after,
        .loading {
            display: inline-block;
            width: 1em;
            height: 1em;
            color: inherit;
            vertical-align: middle;
            pointer-events: none;
            border-radius: 50%;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation: loading 1.8s infinite ease-in-out;
            animation: loading 1.8s infinite ease-in-out;
        }
        
        .loading {
            color: currentcolor;
            position: relative;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-animation-delay: -0.16s;
            animation-delay: -0.16s;
            top: -1em;
        }
        
        .loading:before {
            right: 100%;
            -webkit-animation-delay: -0.32s;
            animation-delay: -0.32s;
        }
        
        .loading:after {
            left: 100%;
        }
        
        .loading:before,
        .loading:after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            width: inherit;
            height: inherit;
        }
        
        @-webkit-keyframes loading {
            0%,
            80%,
            100% {
                box-shadow: 0 1em 0 -1em;
            }
            40% {
                box-shadow: 0 1em 0 -.2em;
            }
        }
        
        @keyframes loading {
            0%,
            80%,
            100% {
                box-shadow: 0 1em 0 -1em;
            }
            40% {
                box-shadow: 0 1em 0 -.2em;
            }
        }
        
        .load-img {
            visibility: hidden;
        }
    </style>
    <script type="text/javascript">
        var loadSum = 0
        var isMobile = null

        function loadDone() {
            loadSum++
        }

        function pcTip() {
            if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
                console.log('mobile')
                isMobile = true
            } else {
                console.log('pc')
                loadSum = loadSum - 10
                isMobile = false
                document.getElementById('loading-txt').innerHTML = '请使用手机或其它移动设备打开!'
            }
        }
    </script>
</head>

<body>
    <div id="loading-mask">
        <div class="loading-box">
            <div class="loading"></div>
            <p id="loading-txt">加载中</p>
            <p>
                <a href="javascript:;" onclick="location.reload()">若长时间加载不成功，请点击我刷新</a>
            </p>
        </div>
    </div>
    <div id="play-btn"><i class="iconfont" style="font-size: 20px;">&#xe617;</i></div>
    <img class="load-img" onload="loadDone();pcTip()" src="./public1/photo/1.png">
    <img class="load-img" onload="loadDone()" src="./public1/photo/2.png">
    <img class="load-img" onload="loadDone()" src="./public1/photo/3.png">
    <img class="load-img" onload="loadDone()" src="./public1/photo/4.png">
    <img class="load-img" onload="loadDone()" src="./public1/photo/6.png">
    <img class="load-img" onload="loadDone()" src="./public1/photo/7.png">
    <img class="load-img" onload="loadDone()" src="./public1/photo/8.png">
    <img class="load-img" onload="loadDone()" src="./public1/photo/8.png">
    <img class="load-img" onload="loadDone()" src="./public1/photo/10.png">
    <img class="load-img" onload="loadDone()" src="./public1/photo/11.png">
    <img class="load-img" onload="loadDone()" src="./public1/photo/12.png">
    <img class="load-img" onload="loadDone()" src="./public1/photo/13.png">
    <img class="load-img" onload="loadDone()" src="./public1/photo/14.png">
    <img class="load-img" onload="loadDone()" src="./public1/photo/15.png">
    <img class="load-img" onload="loadDone()" src="./public1/photo/16.png">
    <img class="load-img" onload="loadDone()" src="./public1/photo/17.png">
    <img class="load-img" onload="loadDone()" src="./public1/photo/18.png">
    <div class="wp">
        <div class="wp-inner">
            <div class="page page1">
                <div class="photo-wrap">
                    <div class="full-bg js-animate animated animation-8000" style="background-image: url(./public1/photo/1.png);width: 100%;height: 100%;position: absolute;top:0;left: 0;" data-sec="zoomCycle" data-time="0">
                    </div>
                    <div class="full-bg js-animate animated animation-2000" style="background-image: url(./public1/photo/2.png);width: 100%;height: 100%;position: absolute;top:0;left: 0;" data-sec="myzoomIn" data-time="12500">
                    </div>
                    <div class="text-frame js-animate animated" data-animate="rotateIn" data-time="500">

                    </div>
                    <div class="text-frame js-animate animated" data-animate="rotateIn" data-time="1200" data-sec="pulseing" data-sectime="1200">
                    </div>
                </div>
                <div class="ele-wrap">
                   <img src="./public1/dyz/zb1.png" class="js-animate animated animation-500" data-animate="bounceInDown" data-time="500" data-sec="zoomOut" data-sectime="800" style="position: absolute;top: 38%;left: 30%; width: 40%">
                   <img src="./public1/dyz/zb2.png" class="js-animate animated animation-500" data-animate="bounceInRight" data-time="1500" data-sec="bounceOutUp" data-sectime="600" style="position: absolute;top: 14%;left: 23%;width: 27%;">
                   <img src="./public1/dyz/hlm.png" class="js-animate animated animation-500" data-animate="bounceInLeft" data-time="1500" data-sec="bounceOutDown" data-sectime="600" style="position: absolute;top: 70%;right: 10%;width: 40%;">

                    <div class="js-animate animated animation-500" data-animate="bounceInDown" data-time="2500" data-sec="rotateOutDownLeft" data-sectime="700" style="position: absolute;top: 60%;width: 100%;text-align: center;">
                        <img src="./public1/dyz/z.png" style="width: 20%">
                         <img src="./public1/dyz/syg.png"style="width: 47%" >
                    </div>
                    <img src="./public1/dyz/tmd.png" class="js-animate animated animation-500" data-animate="swing" data-time="3500" data-sec="zoomOutDown" data-sectime="1000" style="position: absolute;top: 18%;left: 24%;;width: 60%;">
                        
                    <img src="./public1/dyz/hl.png" class="js-animate animated animation-500" data-animate="swing" data-time="3600" data-sec="fadeOutUpBig" data-sectime="1000" style="position: absolute;top: 36%;left: 34%;width: 39%;">
                       
                   <img src="./public1/dyz/yqh.png" class="js-animate animated animation-500" data-animate="swing" data-time="3700" data-sec="fadeOutDownBig" data-sectime="1000" style="position: absolute;top: 52%;left: 23%;;width: 60%;">
                       
                     <img src="./public1/dyz/gw.png" class="js-animate animated animation-500" data-animate="fadeInUp" data-time="4500" data-sec="fadeOutUp" data-sectime="500" style="position: absolute;top: 48%;left: 25%; width: 52%;">
                      
                   <img src="./public1/dyz/yn.png" class="js-animate animated animation-500" data-animate="myzoomIn" data-time="4900" data-sec="zoomOut" data-sectime="3600" style="position: absolute;top: 35%;left: 9%;width: 25%;">
                        
                    <img src="./public1/dyz/yf.png" class="js-animate animated animation-500" data-animate="myzoomIn" data-time="5100" data-sec="zoomOut" data-sectime="3400" style="position: absolute;top: 35%;right: 20%;width: 25%;">
                        
                    <img src="./public1/dyz/bb.png" class="js-animate animated animation-500" data-animate="myzoomIn" data-time="5300" data-sec="zoomOut" data-sectime="3200" style="position: absolute;top: 49%;left: 13%;width: 25%;">
                       
                    <img src="./public1/dyz/ss.png" class="js-animate animated animation-500" data-animate="myzoomIn" data-time="5500" data-sec="zoomOut" data-sectime="3000" style="position: absolute;top: 65%;right: 60%;width: 25%;">
                       
                    <img src="./public1/dyz/gg.png" class="js-animate animated animation-500" data-animate="myzoomIn" data-time="5700" data-sec="zoomOut" data-sectime="2800" style="position: absolute;top: 29%;left: 60%;width: 25%;">
                        
                    <img src="./public1/dyz/gy.png" class="js-animate animated animation-500" data-animate="myzoomIn" data-time="5900" data-sec="zoomOut" data-sectime="2600" style="position: absolute;top: 55%;right: 7%;width: 25%;">
                       
                    <img src="./public1/dyz/zr.png" class="js-animate animated animation-500" data-animate="myzoomIn" data-time="6100" data-sec="zoomOut" data-sectime="2400" style="position: absolute;top: 42%;left: 14%;width: 25%;">
                        
                    <img src="./public1/dyz/zn.png" class="js-animate animated animation-500" data-animate="myzoomIn" data-time="6300" data-sec="zoomOut" data-sectime="2200" style="position: absolute;top: 50%;right: 35%;width: 25%;">
                        
                    <img src="./public1/dyz/xd.png" class="js-animate animated animation-500" data-animate="myzoomIn" data-time="6500" data-sec="zoomOut" data-sectime="2000" style="position: absolute;top: 57%;left: 19%;width: 25%;">
                       
                    <img src="./public1/dyz/jiem.png" class="js-animate animated animation-500" data-animate="myzoomIn" data-time="6700" data-sec="zoomOut" data-sectime="1800" style="position: absolute;top: 22%;right: 30%;width: 25%;">
                        
                    <img src="./public1/dyz/jj.png" class="js-animate animated animation-500" data-animate="myzoomIn" data-time="6900" data-sec="zoomOut" data-sectime="1600" style="position: absolute;top: 68%;left: 57%;width: 25%;">
                        
                    <img src="./public1/dyz/jm.png" class="js-animate animated animation-500" data-animate="myzoomIn" data-time="7100" data-sec="zoomOut" data-sectime="1400" style="position: absolute;top: 28%;right: 52%;width: 25%;">
                       
                    <img src="./public1/dyz/ts.png" class="js-animate animated animation-500" data-animate="myzoomIn" data-time="7300" data-sec="zoomOut" data-sectime="1200" style="position: absolute;top: 46%;left: 66%;width: 25%;">
                       
                    <img src="./public1/dyz/tx.png" class="js-animate animated animation-500" data-animate="myzoomIn" data-time="7500" data-sec="zoomOut" data-sectime="1000" style="position: absolute;top: 41%;right: 32%;width: 25%;">
                       
                    <img src="./public1/dyz/hy.png" class="js-animate animated animation-500" data-animate="myzoomIn" data-time="7700" data-sec="zoomOut" data-sectime="800" style="position: absolute;top: 57%;right: 31%;width: 25%;">
                        

                    <img src="./public1/dyz/cz.png"  class="js-animate animated animation-600" data-animate="bounceInDown" data-time="8000" data-sec="zoomOut" data-sectime="1500" style="position: absolute;top: 15%;left: 43%; width: 17%;">
                        
                   
                    <img src="./public1/dyz/yg.png"  class="js-animate animated animation-600" data-animate="bounceInUp" data-time="8500" data-sec="zoomOut" data-sectime="1000" style="position: absolute;top: 50%;left: 43%; width: 17%;">
                        
                 

                    <img src="./public1/dyz/n.png"  class="js-animate animated animation-600" data-animate="zoomInLeft" data-time="9100" data-sec="slideOutUp" data-sectime="700" style="position: absolute;top: 37%;left: 36%;width: 30%;">
                        
                   
                    <img src="./public1/dyz/xjr.png"  class="js-animate animated animation-600" data-animate="zoomInLeft" data-time="10000" data-sec="slideOutDown" data-sectime="800" style="position: absolute;top: 25%;left: 37%; width: 25%;">
                       
                   
                    <p class="js-animate animated animation-500" data-animate="bounceInUp" data-time="11000" data-sec="zoomOutDown" data-sectime="800" style="position: absolute;top: 39%;left: 32%; width: 100%;letter-spacing: 52px;">
                    <img src="./public1/dyz/cj.png"  >
                    <img src="./public1/dyz/hll.png"  >
                        
                        </p>
                     
                    <img src="./public1/wmjhl/w.png" class="js-animate animated" data-animate="bounceInDown" data-time="14500" style="position: absolute;top: 12%;left: 42%;width: 22%;;">
                    <img src="./public1/wmjhl/m.png" class="js-animate animated" data-animate="bounceInDown" data-time="14500" style="position: absolute;top: 27%;left: 42%;width: 22%;;">    
                    <img src="./public1/wmjhl/j.png" class="js-animate animated" data-animate="bounceInDown" data-time="14500" style="position: absolute;top: 39%;left: 45%;width: 20%;;">
                    <img src="./public1/wmjhl/h.png" class="js-animate animated" data-animate="bounceInDown" data-time="14500" style="position: absolute;top: 52%;left: 43%;width: 18%;;">
                    <img src="./public1/wmjhl/l.png" class="js-animate animated" data-animate="bounceInDown" data-time="14500" style="position: absolute;top: 65%;left: 44%;width: 18%;;">
                    <img src="./public1/wmjhl/gt.png" class="js-animate animated" data-animate="bounceInDown" data-time="14500" style="position: absolute;top: 77%;left: 47%;width: 10%;;">
                </div>
            </div>
            <div class="page page2">
                <div class="photo-wrap">
                    <div class="full-bg js-animate animated animation-1000" style="background-image: url(./public1/photo/3.png);width: 100%;height: 100%;" data-animate="myzoomIn">
                    </div>
                </div>
                <div class="ele-wrap">
                    <div class="js-animate animated" data-animate="bounceInDown" data-time="0" style="position: absolute;top: 5%;width: 80%;left: 15%;text-align: center;">
                        <img style="max-width: 100%;" src="./public1/meta/wedding.png">
                    </div>
                    <div style="position: absolute;top: 16%;left: 0;width: 100%;text-align: center;height: 20%;">
                        <img class="js-animate animated animation-1000" data-animate="minzoomCycle" data-time="500" src="./public1/meta/hun.png" style="position: absolute;left: 15%;">
                        <img class="js-animate animated animation-1000" data-animate="minzoomCycle" data-time="600" src="./public1/meta/li.png" style="position: absolute;left: 30%;">
                        <img class="js-animate animated animation-1000" data-animate="minzoomCycle" data-time="700" src="./public1/meta/yao.png" style="position: absolute;left: 44%; top: 5%;">
                        <img class="js-animate animated animation-1000" data-animate="minzoomCycle" data-time="800" src="./public1/meta/qing.png" style="position: absolute;left: 56%;top: 5%;">
                        <img class="js-animate animated animation-1000" data-animate="minzoomCycle" data-time="900" src="./public1/meta/han.png" style="position: absolute;left: 69%;top: 5%;">
                    </div>
                    <div class="js-animate animated animation-500 radius-box" data-animate="rotateIn" data-time="1500" style="position: absolute;top: 80%;text-align: center;">
                    </div>
                    <div class="js-animate animated animation-500 radius-box" data-animate="rotateIn" data-time="2000" style="position: absolute;top: 80%;text-align: center;">
                        <div class="js-animate animated animation-500" data-animate="fadeInRight" data-time="2500" style="position: absolute;left: 6%;">
                            新娘: 李川莲
                        </div>
                        <div class="js-animate animated animation-500" data-animate="fadeInLeft" data-time="2500" style="position: absolute;right: 6%;">
                            新郎: 杨鹏
                        </div>
                        <div class="js-animate animated animation-800 circle-box" data-animate="myzoomIn" data-time="3000" data-sec="shake" data-sectime="800">
                            <img src="./public1/meta/zuanshi.png">
                        </div>
                    </div>
                    <div class="js-animate animated" data-animate="bounceInUp" data-time="3800" style="position: absolute;top: 90%;left: 0;width: 100%;text-align: center;color: #3a3f58;font-size: 25px;text-shadow: 2px 2px 2px #f6f6f6;">
                        欢迎2025年10月28日参与我们的婚礼
                    </div>
                    <div class="js-animate animated animation-2000" data-animate="zoomIn" data-time="5000" style="position: absolute;top: 95%;left: 0;width: 100%;text-align: center;">
                        <img src="./public1/meta/invitation.png" style="max-width: 75%;">
                    </div>
                </div>
            </div>
            <div class="page page3">
                <div class="photo-wrap">
                    <div class="full-bg js-animate animated animation-5000" style="background-image: url(./public1/photo/6.png);width: 100%;height: 100%;" data-sec="zoomCycle" data-time="0">
                    </div>
                    <div class="full-bg js-animate animated animation-800" style="background-image: url(./public1/photo/4.png);width: 100%;height: 100%;position: absolute;top: 0;left: 0;" data-animate="zoomIn" data-time="10500">
                    </div>
                    <div class="text-frame js-animate animated" data-animate="bounceInUp" data-time="1000" data-sec="fadeOutUp" data-sectime="9000">

                    </div>
                    <div class="text-frame js-animate animated" data-animate="bounceInDown" data-time="1000" data-sec="fadeOutDown" data-sectime="9000">
                    </div>
                </div>
                <div class="ele-wrap">
                    <img src="./public1/zj/ts.png" class="js-animate animated animation-800"  data-animate="myzoomIn" data-time="1500" data-sec="zoomOut" data-sectime="800" style="position: absolute;top: 40%;width: 20%;left: 39%;">
                    <img src="./public1/zj/rj.png" class="js-animate animated animation-500" data-animate="bounceInRight" data-time="2500" data-sec="flipOutY" data-sectime="1000" style="position: absolute;top: 30%;width: 30%;left: 30%">
                    <img src="./public1/zj/ra.png" class="js-animate animated animation-500" data-animate="bounceInLeft" data-time="3000" data-sec="flipOutY" data-sectime="500" style="position: absolute;top: 51%;width: 35%;left: 33%;">

                    <div class="js-animate animated animation-500" data-animate="bounceInDown" data-time="4000" data-sec="zoomOutDown" data-sectime="500" style="position: absolute;top: 27%;width: 20%;left: 28%;">
                        <img src="./public1/zj/hj.png" >
                        <br>
                        <img src="./public1/zj/hk.png" >
                    </div>
                    
                    <img src="./public1/zj/j.png" class="js-animate animated animation-500" data-animate="fadeInUp" data-time="5000" data-sec="zoomOut" data-sectime="3000" style="position: absolute;top: 29%;;left: 40%;width: 23%;">
                   
                   
                   
                    <img src="./public1/zj/wr.png" class="js-animate animated animation-500" data-animate="fadeInRight" data-time="5500" data-sec="zoomOut" data-sectime="2600" style="position: absolute;top: 18%;left: 12%;width: 30%;">
                       
                  
                    <img src="./public1/zj/sl.png" class="js-animate animated animation-500" data-animate="fadeInRight" data-time="5700" data-sec="zoomOut" data-sectime="2400" style="position: absolute;top: 30%;right: 7%;width: 30%;">
                        
                    <img src="./public1/zj/cm.png" class="js-animate animated animation-500" data-animate="fadeInRight" data-time="5900" data-sec="zoomOut" data-sectime="2200" style="position: absolute;top: 41%;left: 8%;width: 30%;">
                        
                    
                     <img src="./public1/zj/ml.png" class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6100" data-sec="zoomOut" data-sectime="2000" style="position: absolute;top: 44%;right: 35%;width: 30%;">
                       
                    
                     <img src="./public1/zj/ka.png" class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6300" data-sec="zoomOut" data-sectime="1800" style="position: absolute;top: 19%;left: 55%;width: 30%;">
                        
                   
                    <img src="./public1/zj/xg.png" class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6500" data-sec="zoomOut" data-sectime="1600" style="position: absolute;top: 51%;right: 10%;width: 30%;">
                        
                   
                     <img src="./public1/zj/xh.png" class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6700" data-sec="zoomOut" data-sectime="1400" style="position: absolute;top: 31%;left: 7%;width: 30%;">
                        
                    
                     <img src="./public1/zj/ll.png" class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6900" data-sec="zoomOut" data-sectime="1200" style="position: absolute;top: 40%;right: 10%;width: 30%;">
                       
                    
                     <img src="./public1/zj/yj.png" class="js-animate animated animation-500" data-animate="fadeInRight" data-time="7100" data-sec="zoomOut" data-sectime="1000" style="position: absolute;top: 53%;left: 11%;width: 30%;">
                        
                   
                     <img src="./public1/zj/nw.png" class="js-animate animated animation-500" data-animate="fadeInRight" data-time="7300" data-sec="zoomOut" data-sectime="800" style="position: absolute;top: 59%;right: 33%;width: 30%;">
                        
                    <img src="./public1/zj/yys.png" class="js-animate animated animation-800" data-animate="bounceInUp" data-time="9000" data-sec="zoomOut" data-sectime="1000" style="position: absolute;top: 21%;left: 25%; width: 45%;">
                        
                   
                    <img src="./public1/zj/d.png" class="js-animate animated animation-800" data-animate="bounceInLeft" data-time="9000" data-sec="zoomOut" data-sectime="1000" style="position: absolute;top: 32%;left: 37%;width: 18%;">
                        
                    
                     <img src="./public1/zj/xl.png" class="js-animate animated animation-800" data-animate="zoomInDown" data-time="9000" data-sec="zoomOut" data-sectime="1000" style="position: absolute;top: 49%;left: 28%;width: 34%;">
                       
                    
                    <div class="js-animate animated animation-800" data-animate="fadeInDown" data-time="10500" data-sec="flashing" data-time="900" style="position: absolute;top: 70%;width: 40%;right: 10%;height: 20%;text-align: center;background-color: rgba(255,255,255, .7);border-radius: 10px;">

                    </div>
                    <div class="js-animate animated animation-800" data-animate="fadeInDown" data-time="10500" style="position: absolute;top: 70%;width: 40%;right: 10%;height: 20%;text-align: center;">
                        
                        <img src="./public1/meta/bride.png" style="position: absolute;bottom: 20px;width: 120%;left: -10%;">
                    </div>
                    
                </div>
            </div>
            <div class="page page4">
                <div class="photo-wrap">
                    <div class="full-bg js-animate animated animation-5000" style="background-image: url(./public1/photo/7.png);width: 100%;height: 100%;" data-sec="zoomCycle" data-time="0">
                    </div>
                    <div class="full-bg js-animate animated animation-600" style="background-image: url(./public1/photo/8.png);width: 100%;height: 100%;position: absolute;top: 0;left: 0;" data-animate="zoomIn" data-time="10500">
                    </div>
                    <div class="text-frame js-animate animated" data-animate="lightSpeedIn" data-time="1000" data-sec="lightSpeedOut" data-sectime="7500">

                    </div>
                    <div class="text-frame js-animate animated" data-animate="lightSpeedIn" data-time="2000" data-sec="lightSpeedOut" data-sectime="8000">
                    </div>
                </div>
                <div class="ele-wrap">
                    <img src="./public1/nan/tbj.png" class="js-animate animated animation-800" data-animate="myzoomIn" data-time="1500" data-sec="zoomOut" data-sectime="800" style="position: absolute;top: 31%;left: 28%; width: 50%;">
                    <img src="./public1/nan/fq.png" class="js-animate animated animation-500" data-animate="bounceInRight" data-time="2500" data-sec="flipOutY" data-sectime="1000" style="position: absolute;top: 37%;left: 28%;width: 50%;">
                    <img src="./public1/nan/ym.png" class="js-animate animated animation-500" data-animate="bounceInLeft" data-time="3000" data-sec="flipOutY" data-sectime="500" style="position: absolute;top: 50%;left: 28%;width: 50%;">

                     <div class="js-animate animated animation-500" data-animate="bounceInDown" data-time="4000" data-sec="zoomOutDown" data-sectime="500" style="position: absolute;top: 33%;left: 28%; width: 50%;">
                        <img src="./public1/nan/qy.png">
                        <img src="./public1/nan/xa.png">
                    </div> 
                    <img src="./public1/nan/eq.png" class="js-animate animated animation-500" data-animate="fadeInUp" data-time="5000" data-sec="zoomOut" data-sectime="3000" style="position: absolute;top: 31%;left: 35%;width: 30%;">
                       
                    <img src="./public1/nan/yj.png" class="js-animate animated animation-500" data-animate="fadeInRight" data-time="5500" data-sec="zoomOut" data-sectime="2600" style="position: absolute;top: 21%;left: 18%;width: 30%;">
                        
                   <img src="./public1/nan/xs.png" class="js-animate animated animation-500" data-animate="fadeInRight" data-time="5700" data-sec="zoomOut" data-sectime="2400" style="position: absolute;top: 33%;right: 8%;width: 30%;">
                        
                    <img src="./public1/nan/cm.png" class="js-animate animated animation-500" data-animate="fadeInRight" data-time="5900" data-sec="zoomOut" data-sectime="2200" style="position: absolute;top:50%;left: 17%;width: 40%;">
                       
                    <img src="./public1/nan/sl.png" class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6100" data-sec="zoomOut" data-sectime="2000" style="position: absolute;top: 29%;right: 63%;width: 30%;">
                        
                    <img src="./public1/nan/ck.png" class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6300" data-sec="zoomOut" data-sectime="1800" style="position: absolute;top: 21%;left: 50%;width: 30%;">
                        
                    <img src="./public1/nan/kl.png" class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6500" data-sec="zoomOut" data-sectime="1600" style="position: absolute;top: 58%;right: 29%;width: 36%;">
                        
                    <img src="./public1/nan/ych.png" class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6700" data-sec="zoomOut" data-sectime="1400" style="position: absolute;top: 41%;left: 13%;width: 50%;">
                        
                    <img src="./public1/nan/xx.png" class="js-animate animated animation-500" data-animate="fadeInRight" data-time="6900" data-sec="zoomOut" data-sectime="1200" style="position: absolute;top: 51%;right: 6%;width: 40%;">
                        
                    <img src="./public1/nan/ql.png" class="js-animate animated animation-500" data-animate="fadeInRight" data-time="7100" data-sec="zoomOut" data-sectime="1000" style="position: absolute;top: 42%;left: 60%;width: 30%;">
                        
                    
                    <img src="./public1/nan/ssf.png" class="js-animate animated animation-800" data-animate="bounceInUp" data-time="9000" data-sec="zoomOut" data-sectime="1000" style="position: absolute;top: 26%;left: 29%; width: 50%;">
                        
                    <img src="./public1/nan/hzq.png" class="js-animate animated animation-800" data-animate="bounceInLeft" data-time="9000" data-sec="zoomOut" data-sectime="1000" style="position: absolute;top: 37%;left: 29%;width: 50%;">
                        
                     <img src="./public1/nan/d.png" class="js-animate animated animation-800" data-animate="zoomInDown" data-time="9000" data-sec="zoomOut" data-sectime="1000" style="position: absolute;top: 48%;left: 44%;width: 15%;">
                       
                    <img src="./public1/nan/xl.png" class="js-animate animated animation-800" data-animate="zoomInDown" data-time="9000" data-sec="zoomOut" data-sectime="1000" style="position: absolute;top: 56%;left: 33%;width: 40%;">
                        
                    <div class="js-animate animated animation-800" data-animate="fadeInDown" data-time="10500" data-sec="pulseing" data-time="900" style="position: absolute;top: 70%;width: 40%;left: 10%;height: 20%;text-align: center;background-color: rgba(255,255,255, .7);border-radius: 10px;">

                    </div>
                    <div class="js-animate animated animation-800" data-animate="fadeInDown" data-time="10500" style="position: absolute;top: 70%;width: 40%;left: 10%;height: 20%;text-align: center;">
                       
                        <img src="./public1/meta/lang.png" style="position: absolute;bottom: 10px;width: 120%;left: -16%;">
                    </div>
                    
                </div>
            </div>
            <div class="page page5">
                <div class="photo-wrap">
                    <div class="photo-box js-animate animated animation-2000" data-animate="fadeIn" data-time="500" style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 1;
                        background-image: url(./public1/photo/9.png);"></div>
                    <div class="photo-box js-animate animated animation-2000" data-animate="fadeInDown" data-time="3000" style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 2;
                        background-image: url(./public1/photo/10.png);"></div>
                    <div class="photo-box js-animate animated animation-2000" data-animate="fadeInUp" data-time="6000" style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 3;
                        background-image: url(./public1/photo/11.png);"></div>
                    <div class="photo-box js-animate animated animation-2000" data-animate="fadeIn" data-time="9000" style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 4;
                        background-image: url(./public1/photo/12.png);"></div>
                    <div class="photo-box js-animate animated animation-2000" data-animate="rollIn" data-time="12000" style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 5;
                        background-image: url(./public1/photo/18.png);"></div>
                    <div class="photo-box js-animate animated animation-2000" data-animate="rotateInDownRight" data-time="15000" style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 6;
                        background-image: url(./public1/photo/14.png);"></div>
                    <div class="photo-box js-animate animated animation-2000" data-animate="rotateIn" data-time="18000" style="position: absolute;width: 100%;height: 38%;top: 0;left: 0;z-index: 7;
                        background-image: url(./public1/photo/15.png);"></div>
                    <div class="photo-box js-animate animated animation-2000" data-animate="rotateInDownRight" data-time="18000" style="position: absolute;width: 100%;height: 62%;top: 38%;left: 0;z-index: 8;
                        background-image: url(./public1/photo/16.png);"></div>
                    <div class="photo-box js-animate animated animation-2000" data-animate="rotateInDownRight" data-time="21000" style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 9;
                        background-image: url(./public1/photo/17.png);"></div>
                    <div class="photo-box js-animate animated animation-2000" data-animate="zoomIn" data-time="24000" style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 10;
                        background-image: url(./public1/photo/13.png);"></div>
                    <h4 class="js-animate animated animation-2000" data-animate="myzoomIn" data-time="24000" style="position: absolute;width: 100%;bottom: 6%;left: 0;z-index: 11;text-align: center;line-height: 115px;font-size: 40px; text-shadow: 2px 2px 1px #a51b67;color: #a3b158;">
                        来吃席O(∩_∩)O
                    </h4>
                    <div class="text-frame js-animate animated" data-animate="zoomInLeft" data-time="1000" data-sec="pulseing" data-sectime="1000">
                    </div>
                    <div class="text-frame js-animate animated" data-animate="zoomInRight" data-time="1000" data-sec="pulseing" data-sectime="1500">
                    </div>
                </div>
                <div class="ele-wrap">
                </div>
            </div>
            <!-- <div class="page page6" style="position: relative;">
              
                <div id="map">
                    <iframe style="width: 100%; height: 100%;" src="https://map.baidu.com/mobile/webapp/search/search/qt=s&wd=%E6%B1%9F%E8%A5%BF%E7%9C%81%E4%B8%8A%E9%A5%B6&c=179&searchFlag=bigBox&version=5&exptype=dep&src_from=webapp_all_bigbox&src=0/vt=map" frameborder="0"></iframe>
                </div>
                <div id="location-btn"><i class="iconfont" style="font-size: 32px;">&#xe616;</i></div>
                <div id="map-msg">
                    <p class="js-animate animated" data-animate="bounceInDown" data-time="0"><i class="iconfont red-icon">&#xe63e;</i>这里写婚礼地址</p>
                    <p class="js-animate animated" data-animate="bounceInUp" data-time="1000"><i class="iconfont red-icon">&#xe636;</i>有任何疑问请致电 新郎&新娘</p>
                </div>
            </div>
        </div> -->
        <span class="start"><i class="iconfont" style="color: #fff;font-size: 30px;">&#xe606;</i></span>
        <audio id="mp3" src="./public1/music/music.mp3" autoplay loop></audio>
        <script src="./public1/js/js.fullpage.js"></script>
        <script>
            // 滚屏动画控制

            if (isMobile !== false) {
                var loadTimer = setInterval(() => {
                    console.log(loadSum)
                    if (loadSum >= 17) {
                        start()
                    }
                }, 300);
            }

            var domLists = []
            var mapFlag = false

            function start() {
                clearInterval(loadTimer);

                var forEach = [].forEach;

                setTimeout(() => {
                    document.getElementById('loading-mask').style.display = 'none'
                }, 100);
                document.getElementsByClassName('wp-inner')[0].fullpage({
                    change: function(e) {
                        clearTime()
                            // 移除动画属性
                        forEach.call(document.querySelectorAll('.page')[e.cur].querySelectorAll('.js-animate'), function(v) {
                            v.classList.add('hide');
                            v.classList.remove(v.dataset['animate']);
                            if (v.dataset['sec']) {
                                v.classList.remove(v.dataset['sec']);
                            }
                        });
                    },
                    afterChange: function(e) {
                        if (e.cur === 5 && !mapFlag) {
                            initMap()
                        }

                        domLists = document.querySelectorAll('.page')[e.cur].querySelectorAll('.js-animate')
                        forEach.call(domLists, v => {
                            var time = v.dataset.time;
                            v.timer = setTimeout(function() {
                                v.classList.add(v.dataset['animate']);
                                v.classList.remove('hide');
                                if (v.dataset['sec']) {
                                    var time = v.dataset.sectime || 0
                                    v.sectimer = setTimeout(function() {
                                        v.classList.remove(v.dataset['animate']);
                                        v.classList.add(v.dataset['sec']);
                                    }, time);
                                }
                            }, time);
                        })
                    }
                });
            }

            function clearTime() {
                domLists.forEach((dom, i, arr) => {
                    if (dom.timer) {
                        clearTimeout(dom.timer);
                    }
                    if (dom.sectimer) {
                        clearTimeout(dom.sectimer);
                    }
                    if (arr && arr.splice) {
                        arr.splice(i, 1)
                    }
                })
            }

            // 地图
            function initMap() {
                if (window.BMap) {
                    mapFlag = true
                    var mapCenter = [104.083002, 30.5621]
                    var map = new BMap.Map("map", {
                        minZoom: 10,
                        maxZoom: 14
                    })

                    map.centerAndZoom(new BMap.Point(mapCenter[0], mapCenter[1]), 13);

                    function ComplexCustomOverlay(point, text, mouseoverText) {
                        this._point = point;
                        this._text = text;
                        this._overText = mouseoverText;
                    }
                    ComplexCustomOverlay.prototype = new BMap.Overlay();
                    ComplexCustomOverlay.prototype.initialize = function(map) {
                        this._map = map;
                        var div = this._div = document.createElement("div");
                        div.style.position = "absolute";
                        div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
                        div.style.backgroundColor = "#E60000";
                        div.style.borderRadius = "3px";
                        div.style.color = "white";
                        div.style.height = "18px";
                        div.style.padding = "2px 4px";
                        div.style.lineHeight = "18px";
                        div.style.whiteSpace = "nowrap";
                        div.style.MozUserSelect = "none";
                        div.style.fontSize = "12px"
                        var span = this._span = document.createElement("span");
                        div.appendChild(span);
                        span.appendChild(document.createTextNode(this._text));
                        var that = this;

                        var arrow = this._arrow = document.createElement("div");
                        // arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";
                        arrow.style.position = "absolute";
                        arrow.style.width = "0";
                        arrow.style.height = "0";
                        arrow.style.top = "22px";
                        arrow.style.left = "10px";
                        arrow.style.overflow = "hidden";
                        arrow.style.border = "6px solid transparent";
                        arrow.style.borderTop = "6px solid #E60000";
                        div.appendChild(arrow);

                        map.getPanes().labelPane.appendChild(div);

                        return div;
                    }
                    ComplexCustomOverlay.prototype.draw = function() {
                        var map = this._map;
                        var pixel = map.pointToOverlayPixel(this._point);
                        this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
                        this._div.style.top = pixel.y - 30 + "px";
                    }

                    var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(mapCenter[0], mapCenter[1]), "婚礼", "N and Y");

                    map.addOverlay(myCompOverlay);

                    document.querySelector('#location-btn').addEventListener('click', () => {
                        map.panTo(new BMap.Point(mapCenter[0], mapCenter[1]))
                    })
                }
            }

            // 音乐播放控制
            window.onload = function() {
                let mp3 = document.querySelector('#mp3')
                let playBtn = document.querySelector('#play-btn')
                let play

                mp3.load()

                document.addEventListener("WeixinJSBridgeReady", function() {
                    mp3.play()
                    if (!mp3.paused) {
                        this.style.animationPlayState = 'running'
                        mp3.play()
                        play = true
                    }
                }, false)

                play = !mp3.paused && mp3.readyState === 4

                if (play) {
                    playBtn.style.animationPlayState = 'running'
                } else {
                    playBtn.style.animationPlayState = 'paused'
                }

                playBtn.addEventListener('click', function(event) {
                    if (play) {
                        this.style.animationPlayState = 'paused'
                        mp3.pause()
                        play = false
                    } else {
                        if (mp3.readyState === 4) {
                            this.style.animationPlayState = 'running'
                            mp3.play()
                            play = true
                        }
                    }
                })
            }
        </script>
</body>

</html>